<template>
  <div class="hello">
    <flexbox class="h-title">
      <flexbox-item><div class="flex-demo user"><font-awesome-icon :icon="['fas','user']"/></div></flexbox-item>
      <flexbox-item><div class="flex-demo">云南餐厅</div></flexbox-item>
      <flexbox-item><div class="flex-demo">设置</div></flexbox-item>
    </flexbox>
    <button @click="save()"> 点击</button>
  </div>
</template>

<script>
  import { Flexbox, FlexboxItem, Divider } from 'vux'

  export default {
    name:'top',
    methods:{
       save(){

       }
    },
    components: {
      Flexbox,
      FlexboxItem,
      Divider
    }
  }
</script>
<style lang="scss">
  @import "~scss/variable";
  .h-title{
    box-shadow: 0 0 10px #06c;
    .flex-demo{
      padding: 12px;
      text-align: center;
      border: 1px solid $color-theme;
    }
    .user{
      color: #ff0000;
      &:hover{
        color: lightblue;
      }
    }
  }



</style>

